<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>05-js获取元素的其他方法</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			
			#box{
				position: relative;
				overflow: hidden;
				width: 738px;
				height: 430px; 
				margin: 0 auto;
			}
			/*设置所有图片隐藏*/
			#box img{
				display: none;
			}
			#box span{
				position: absolute;
				background-color: red;
				font-size: 24px;
				cursor:pointer;
			}
			#box button{
				position: absolute;
			}
			#box #b_top{
				top:200px;
				left:0;
			}
			#box #b_bottom{
				top:200px;
				right:0;
			}
			#box #b_one{
				top:0;
				left:0;
			}
			#box #b_twe{
				top:0;
				left:55px;
			}
			#box .active{
				background-color: pink;
			}
			#box #b_number{
				position: absolute;
				top:0;
				left: 350px;
				width: 40px;;
				background:red;
				font-size: 24px;
				text-align: right;
			}
			#box #b_number #b_numbers{
				position: absolute;
				top:0;
				left: 0px;
			}
			#box #b_number2{
				position: absolute;
				bottom:0;
				left: 330px;
				width:120px;
				font-size: 24px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<img src="st1.jpg" alt="">
			<img src="st2.jpg" alt="">
			<img src="st3.jpg" alt="">
			<img src="st4.jpg" alt="">
			<img src="st5.jpg" alt="">
			<!--上下按钮-->
			<button id="b_top">上</button><button id="b_bottom">下</button>
			<!--模式调换-->
			<span id="b_one" class="active">单次</span><span id="b_twe">循环</span>
			<!--第几张-->
			<div id="b_number"><span id="b_numbers"></span>/5</div>
			<div id="b_number2"></div>
		</div>
		<p>HTMLCollection和NodeList相同点:都是类数组对象,都是类数组对象,都是类数组对象!</p>
		<p>不同点:NodeList的元素是Node,HTMLCollection的元素是Element</p>
		<P>NodeList是一个节点的集合(既可以包含元素和其他节点)，在DOM中，节点的类型总共有12种，通过判断节点的nodeType来判断节点的类型。我们可以通过Node.childNodes和document.querySelectAll() (返回NodeList的接口有很多，这里不一一列举，下同)来获取到一个NodeList对象。我们可以通过Node.childNodes和document.querySelectAll() (返回NodeList的接口有很多，这里不一一列举，下同)来获取到一个NodeList对象。</P>
		<P>HTMLCollection是元素集合，它和NodeList很像，有length属性来表示HTMLCollection对象的长度，也可以通过elements.item()传入元素索引来访问。当时它还有一个nameItem()方法，可以返回集合中name属性和id属性值得元素。HTMLDocument 接口的许多属性都是 HTMLCollection 对象，它提供了访问诸如表单、图像和链接等文档元素的便捷方式，比如document.images和document.forms的属性都是HTMLCollection对象。</P>
		<script type="text/javascript">
			var o_top = document.getElementById("b_top");
			var o_bttom = document.getElementById("b_bottom");
			var o_box = document.getElementById("box");
			var o_Img = o_box.getElementsByTagName("img");
			var o_One= o_box.getElementsByTagName("b_one");
			var o_Two = o_box.getElementsByTagName("b_twe");
			var o_Number = document.getElementById("b_numbers");
			var o_Number2 = document.getElementById("b_number2");
			//设置一个变量控制图片的切换
			var n = 0;
			var chg=1;
			var chg2=1;
			var bool = true;
			o_Number.innerHTML=chg;
			//设置第一张图片显示
			o_Img[0].style.display="block";
			o_Number2.innerHTML="第一张图片";
			//模式切换
			b_one.onclick = function(){
				b_one.className="active";
				b_twe.className="";
				bool = false;
			}
			b_twe.onclick = function(){
				b_twe.className="active";
				b_one.className="";
				bool = true;
				o_bttom.removeAttribute("disabled", true);
				o_top.removeAttribute("disabled", false);
			}
			//下一张
			o_bttom.onclick = function(){
				o_Img[n].style.display="none";	
				n++;
				if(n>=o_Img.length){
					if(bool){
						n=0;		
					}else{
						n=o_Img.length-1;
						o_bttom.setAttribute("disabled", true);
						o_Number2.innerHTML="第五张图片";
						o_Number.innerHTML="5";
						alert("最后一张!");
					}
				}
				o_Img[n].style.display="block";
				//数字加
				if(chg<5){
					chg++;	
				}else{
					chg=1;
				}
				o_Number.innerHTML=chg;		
				//文字加
				if(chg2<5){
					chg2++;
				}else{
					chg2=1;
				}
				switch(chg2){
					case 1:o_Number2.innerHTML="第一张图片";break;
					case 2:o_Number2.innerHTML="第二张图片";break;
					case 3:o_Number2.innerHTML="第三张图片";break;
					case 4:o_Number2.innerHTML="第四张图片";break;
					case 5:o_Number2.innerHTML="第五张图片";break;
					default:"第一张图片";	
				}
			}
				
		
			//图片反须要把所有图片隐藏
			//上一张
			o_top.onclick = function(){
				o_Img[n].style.display="none";
				n--;
				if(n<0){
					if(bool){
						n=o_Img.length-1;
					}else{
						n=0;
						o_top.setAttribute("disabled", true);
						o_Number2.innerHTML="第一张图片";
						o_Number.innerHTML="1";
						alert("这是第一张,前面没有了!");
					}	
				}
				o_Img[n].style.display="block";	
				if(bool){	
					//数字减
					if(chg>1){
						chg--;	
					}else{
						chg=5;
					}
					o_Number.innerHTML=chg;		
					//文字减
					if(chg2>1){
						chg2--;
					}else{
						chg2=5;
					}
					switch(chg2){
						case 1:o_Number2.innerHTML="第一张图片";break;
						case 2:o_Number2.innerHTML="第二张图片";break;
						case 3:o_Number2.innerHTML="第三张图片";break;
						case 4:o_Number2.innerHTML="第四张图片";break;
						case 5:o_Number2.innerHTML="第五张图片";break;
						default:"第一张图片";
					}
				}	
			}
			
		</script>	
	
		
	</body>
</html>
